import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Icon, Switch } from 'antd'
import 'styles/components/template/drag-widget-page/widget-item.scss'
/**
 * 组件类型
 */
class Widget extends React.Component{
  constructor(props) {
    super(props);
  }

  renderWidget = (widget) => {
    switch(widget.messageKey){
      case 'com_start_date':
      case 'com_end_date':
      case 'com_date':
        return (
          <div className="widget-single-select">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages('expense-6.key234')/*选择日期*/}<Icon type="right" /></div>
          </div>
        );
      case 'com_start_end_date':
        return (
          <div className="widget-single-select">
            <div className="widget-title">{messages('expense-6.key235')/*开始结束日期*/}</div>
            <div className="widget-content">{widget.promptInfo || messages('expense-6.key234')/*选择日期*/}<Icon type="right" /></div>
          </div>
        );
      case 'com_time':
        return (
          <div className="widget-single-select">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages('expense-6.key236')/*选择时间*/}<Icon type="right" /></div>
          </div>
        );
      case 'com_select_box':
      case 'com_currency':
      case 'com_value_list':
      case 'com_reimbursement_type':
      case 'com_company_paid':
      case 'com_prosumer':
      case 'com_class':
      case 'com_seat':
      case 'com_type':
      case 'com_car':
        return (
          <div className="widget-select">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages('common.select')/*请选择*/}<Icon type="right" /></div>
          </div>
        );
      case 'com_text_area':
      case 'com_remarks':
        return (
          <div className="widget-text-area">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">
              {widget.promptInfo || messages('common.please.input')/*请输入*/}
              <div className="widget-text-area-count">0 / {this.getMaxLength(widget)}</div>
            </div>
          </div>
        );
      case 'com_prompt_text':
        return (
          <div className="widget-text-area">
            <div className="widget-content-2">
              {widget.promptInfo || messages('common.please.input')/*请输入*/}
            </div>
          </div>
        );
      case 'com_switch':
        return (
          <div className="widget-switch">
            <div className="widget-title">{this.getFieldName(widget)}<Switch defaultChecked/></div>
          </div>
        );
      case 'com_city':
      case 'com_departure_city':
      case 'com_arrival_city':
      case 'com_number':
      case 'com_room_number':
      case 'com_budget':
      case 'com_standard':
      case 'com_discount':
        return (
          <div className="widget-input">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages('common.please.input')/*请输入*/}</div>
          </div>
        );
      default:
        return widget.fieldName;
    }
  };

  renderCombineWidget = (widget) => {
    const { onClick, className } = this.props;
    switch(widget.messageKey){
      case 'suite_flight':
      case 'suite_train':
      case 'suite_hotel':
      case 'suite_dining':
      case 'suite_car':
        return (
          <div className="widget-combine">
            <div className="combine-title">{this.getFieldName(widget)}</div>
            {widget.subWidgetList && widget.subWidgetList.map((subWidget, index) => {
              return (
                <div>
                  <div style={{position: 'relative'}} onClick={(e) => {e.stopPropagation(); onClick(e, index);}}>
                    {this.renderWidget(subWidget)}
                    <div className={widget.subSelectedIndex === index && className.indexOf('selected') > -1 ? 'sub-selected' : ''} />
                  </div>
                  {index !== widget.subWidgetList.length - 1 && (
                    <div className="divider-line"/>
                  )}
                </div>
              )
            })}
          </div>
        );
      default:
        return widget.fieldName
    }
  };

  getFieldName = (widget) => {
    let result = widget.fieldName || widget.name;
    widget.fieldNameI18n && widget.fieldNameI18n.map(i18nDTO => {
      if(i18nDTO.language.toLowerCase() === this.props.language.code)
        result = i18nDTO.value;
    });
    return result;
  };

  getMaxLength = (widget) => {
    let maxLength = 500;
    switch (widget.messageKey) {
      case 'com_remarks':
        maxLength = 500;
        break;
      case 'com_text_area':
        maxLength = 1000;
        break;
    }
    if (widget.fieldContent && JSON.parse(widget.fieldContent).maxLength) {
      maxLength = JSON.parse(widget.fieldContent).maxLength;
    }
    return maxLength;
  };

  render() {
    const { widget, width, className, onClick } = this.props;
    return !widget.isCombine ? (
      <div className={`widget-item ${className} ${widget.required ? "required" : ""}`} style={{ width }} onClick={onClick}>
        {this.renderWidget(widget)}
      </div>
    ) : (
      <div className={`widget-item ${className} ${widget.required ? "required" : ""}`} style={{ width }} onClick={onClick}>
        {this.renderCombineWidget(widget)}
      </div>
    )
  }
}

Widget.propTypes = {
  onClick: React.PropTypes.func,
  widget: React.PropTypes.object,
  width: React.PropTypes.any,
  className: React.PropTypes.string
};

Widget.defaultProps = {
  className: '',
  onClick: () => {}
};

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(Widget)
